<template>
  <div class="app-container">
    <div class="search-bar">
      <el-form ref="form" :model="searchData"  :inline="true"  label-width="80px" size="mini">
        <el-row :gutter="10">
          <el-col :span="3.5">
            <el-form-item label="起始日期">
              <el-date-picker
                v-model="searchData.beginDate"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="起始日期"
                :picker-options="pickerOptions1">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="结束日期">
              <el-date-picker
                v-model="searchData.endDate"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="结束日期"
                :picker-options="pickerOptions2">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="">
              <el-button type="primary" size="mini" @click="search">查 询</el-button>
              <el-button size="mini" @click="reset">清 空</el-button>
              <el-button
                :loading="downloadLoading"
                class="filter-item"
                type="primary"
                icon="el-icon-download"
                @click="useExportUtil()"
              >
                导出
              </el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="content">
      <el-table
        :data="tableData"
        border
        style="width: 100%"
        :header-cell-style="{height:'30px',padding:'0px',fontSize:'14px'}"
        :row-style="{height:'25px'}"
        :cell-style="{padding:'1px'}"
        show-summary :summary-method="getSummaries"
      >
        <el-table-column
          type="index"
          width="50"
        />
        <el-table-column
          prop="ledger_AREA"
          label="作业区"
          sortable
          header-align="center"
          align="center"
        />
        <el-table-column
          prop="weekPlanNum"
          label="计划井数（口）"
          header-align="center"
          align="center"
        />
        <el-table-column
          prop="weekHotwashAmount"
          label="计划用液量统计（m3）"
          header-align="center"
          align="center"
        />
        <el-table-column
          prop="weekDosageAmount"
          label="计划加药量统计（t）"
          header-align="center"
          align="center"
        />
      </el-table>
    </div>
  </div>
</template>

<script>
import excelUtil from "@/utils/dealwithExcelUtil";

export default {
  name: 'weekPlan',
  data() {
    return {
      downloadLoading: false,
      searchData: {
        beginDate:"",
        endDate:""
      },
      tableData: [],
      timeChoice:"",
      pickerOptions1: { //结束时间不能大于开始时间
        disabledDate: (time) => {
          if (this.searchData.endTime) {
            return (
              time.getTime() < Date.now() - 8.64e7 ||
              time.getTime() > new Date(this.searchData.endTime).getTime()
            )
          } else {
            return time.getTime() < Date.now() - 8.64e7;
          }
        }
      },
      pickerOptions2: {
        disabledDate: (time) => {
          if (this.searchData.beginDate) {
            const seven = 6*3600*24*1000
            const minTime = new Date(this.searchData.beginDate).getTime()
            const maxTime =new Date(this.searchData.beginDate).getTime() + seven
            return (
              time.getTime()< minTime ||time.getTime() > maxTime
              // time.getTime() < new Date((this.searchData.startTime).getTime()+60*60*24*7*1000)
            )
          } else {
            return time.getTime() < Date.now() - 8.64e7;
          }
        },
      }
    }
  },

  created() {
    this.getListPage(this.searchData)
  },
  methods: {
    useExportUtil() {
      const date = this.searchData
      console.log(date)
      this.downloadLoading = true
      const initColumn = [
        {
          key: 'index',
          title: '#'
        },
        {
          key: 'ledger_AREA',
          title: '作业区'
        },
        {
          key: 'weekPlanNum',
          title: '计划井数'
        },
        {
          key: 'weekHotwashAmount',
          title: '计划用液量统计'
        },
        {
          key: 'weekDosageAmount',
          title: '计划加药量统计'
        }
      ]
      this.$http
        .post('/tPlanHotwash/queryWeekPlan', date).then(({ data: { data: res }}) => {
          const tableData = res
          console.log(tableData, 'tabledata')
          tableData.forEach((item, index) => {
            item.index = index
          })
          excelUtil.exportExcel(initColumn, tableData, '清防蜡周计划.xlsx')
          this.downloadLoading = false
        }).catch(err => {
          this.downloadLoading = false
          this.$message.error(err)
        })
    },
    getListPage(data) {
      this.$http.post('/tPlanHotwash/queryWeekPlan', data).then(({ data: { data: res } }) => {
        this.tableData = res
      }).catch(err => {
        this.$message.error(err)
      })
    },
    search() {
      this.getListPage(this.searchData)
    },
    reset() {
      this.searchData = {}
    },
    getSummaries(param) {
      const { columns, data } = param
      const sums = []
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计'
          return
        }
        const values = data.map(item => Number(item[column.property]))
        if (index == 4) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr)
            if (!isNaN(value)) {
              let num = Number(prev) + Number(curr)
              return num.toFixed(3)
            } else {
              return Number(prev).toFixed(3)
            }
          }, 0)
        } else if(index !== 1 && index !==4 ){
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr)
            if (!isNaN(value)) {
              let num = Number(prev) + Number(curr)
              return num
            } else {
              return prev
            }
          }, 0)
        }else {
          sums[index] = '--'
        }
      })
      return sums
    }
  }
}
</script>

<style scoped>

</style>
